	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: '/bookstore/img/slider/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(current){
					$('.caption').animate({
						bottom:-35
					},100);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationStart on slide: ', current);
					};
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationComplete on slide: ', current);
					};
				},
				slidesLoaded: function() {
					$('.caption').animate({
						bottom:0
					},200);
				}
			});
		});
	</script>
		<div id="example">
			<div id="slides">
				<div class="slides_container">
				<?php foreach ($events as $event):?>
					<div class="slide">
						<?php if($event['Event']['link']):?><a href="<?php echo $event['Event']['link'];?>" title="<?php echo $event['Event']['title'];?>" target="_blank"><?php endif;?><img src="<?php echo $event['Event']['image'];?>" width="509" height="220" alt="<?php echo $event['Event']['title'];?>"><?php if($event['Event']['link']) echo '</a>';?>
						<div class="caption" style="bottom:0">
							<p><?php echo $event['Event']['title'];?></p>
							<span style="font-size: 8pt;"><?php echo $event['Event']['content'];?></span>
						</div>
					</div>
				<?php endforeach;?>					
				</div>
			</div>
			<img src="/bookstore/img/slider/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
		</div>
